<template>
  <DetailsFormBox :title="page.title" :type="route.query.type" :form="data.form" :formInfo="[
    {
      label: '创建人员',
      value: 'createPersonName',
    },
    {
      label: '创建时间',
      value: 'createTime',
    },
    {
      label: '含税总额',
      value: 'stockBalanceMxSumValue',
      unit: '元'
    },
    {
      label: '未税总额',
      value: 'stockBalanceMxSumValueBeforeTax',
      unit: '元'
    },
  ]" :loading="data.loading" :loadingMsg="data.loadingMsg">
    <template #default="{ form }">
      <div class="p-12 full flex-c">
        <CellBox title="基本信息" isTop>
          <FlexBox :margin="1">
            <ElFormItemBox label="结存单号">
              {{ form.stockBalanceBillNo }}
            </ElFormItemBox>
            <ElFormItemBox label="结存仓库">
              {{ form.warehouseName }}
            </ElFormItemBox>
            <ElFormItemBox label="结存日期">
              {{ `${form.excuteYear || '0000'}-${form.excuteMonth || '00'}-${form.excuteDay || '00'}` }}
            </ElFormItemBox>
            <ElFormItemBox label="结存备注">
              {{ form.stockBalanceRemark || '--' }}
            </ElFormItemBox>
          </FlexBox>
        </CellBox>
        <CellBox title="单据明细" isTop isAuto>
          <template #btn>
            <el-link type="primary" @click="exportBtn" icon="Download">导出明细</el-link>
          </template>
          <el-auto-resizer class="full m-1">
            <template #default="{ height }">
              <TableBox :height="height" :data="{
                disabled: !isEdit,
                tbody: form.detailList,
                search: data.search,
                thead: data.thead
              }">
              </TableBox>
            </template>
          </el-auto-resizer>
        </CellBox>
      </div>
    </template>
  </DetailsFormBox>
</template>
<script setup lang="ts">
import { useListComponent } from '../pageTs'; // 引入逻辑
import page from '../page.ts'; // 引入逻辑
import '../pageCss.scss'; // 引入样式
const { dataInfo, options } = useListComponent();
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
import { useRoute } from 'vue-router';
// 获取当前路由对象
const route = useRoute();
const data: any = reactive({
  loading: false,
  loadingMsg: '',
  mainPage: 1,
  form: {
    detailList: []
  },
  thead: [
    {
      label: '物料名称',
      prop: 'goodsName',
      align: 'left', // 默认居中对齐，但原始数据中指定了isFloat为true，可能需要左对齐
      width: 220,
      fixed: true,
      sortable: true,//开启排序
    },
    {
      label: '规格型号',
      prop: 'specificationName',
      align: 'center', // 默认居中对齐，但原始数据中指定了isFloat为true，可能需要左对齐
      width: 128,
      fixed: true,
      sortable: true,//开启排序
    },
    {
      label: '供应商',
      prop: 'supplierName',
      align: 'left',
      width: 160,
      sortable: true,//开启排序
    },
    {
      label: '物料编号',
      prop: 'goodsCode',
      align: 'center',
      width: 100,
      sortable: true,//开启排序
    },
    {
      label: '计价单位',
      prop: 'priceUnitName',
      align: 'center',
      width: 80,
    },
    {
      label: '物料类型',
      prop: 'categoryName',
      align: 'center',
      width: 100,
      sortable: true,//开启排序
    },
    {
      label: '未税均价',
      prop: 'averagePriceBeforeTax',
      align: 'center',
      width: 100,
      sortable: true,//开启排序
    },
    {
      label: '含税均价',
      prop: 'averagePrice',
      align: 'center',
      width: 100,
      sortable: true,//开启排序
    },
    {
      label: '期初',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'initialQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'initialSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'initialSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '当月采购',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'nowPurchaseQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'nowPurchaseSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'nowPurchaseSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '实际领料',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'nowGetProduceMaterialQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'nowGetProduceMaterialSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'nowGetProduceMaterialSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '退货',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'nowStockGoodsCreditQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'nowStockGoodsCreditSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'nowStockGoodsCreditSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '盘盈',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'nowTakeStockProfitQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'nowTakeStockProfitSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'nowTakeStockProfitSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '盘亏',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'nowTakeStockLossQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'nowTakeStockLossSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'nowTakeStockLossSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '其他入库',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'nowOtherInQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'nowOtherInSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'nowOtherInSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '其他出库',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'nowOtherOutQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'nowOtherOutSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'nowOtherOutSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
    {
      label: '期末',
      prop: '',
      align: 'center',
      width: null,
      children: [
        {
          label: '数量',
          prop: 'finalQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '未税',
          prop: 'finalSubtotalBeforeTax',
          align: 'center',
          width: 100,
        },
        {
          label: '含税',
          prop: 'finalSubtotal',
          align: 'center',
          width: 100,
        },
      ],
    },
  ],
});
const isEdit = ref(true)


//获取数据
const getForm = async () => {
  const _query: any = route.query
  setLoading()
  proxy.$api.StockBalance.GetStockBalanceBillDetail({
    stockBalanceCode: _query.code,
  })
    .then((res: any) => {
      proxy.$message('获取成功')
      data.form = res
      data.loading = false
    })
    .catch(() => {
      data.loading = false
    });
};
// 导出数据
const exportBtn = () => {
  setLoading()
  proxy.$exportData(
    {
      thead: data.thead,
      tbody: data.form.detailList,
      fileName: '结存明细',
    },
    data,
  );
};
const setLoading = (title: string = '正在获取数据,请稍等...') => {
  if (!data.loading) {
    data.loading = true;
    data.loadingMsg = title;
  }
};
onMounted(() => {
  getForm();
});
</script>
